<template>
  <div>
    <!-- 
      知识点：
            1、readonly  只读，  将对象的所有属性，都变成只读不能修改，修改就会报错；
            2、shallowReadonly  表层/浅层属性 只读，不能修改。  深层属性(第二层及以后) 可以修改，修改不报错。 
    
    -->
    <h1>readonlly 和 shallowReadonly</h1>
    <h1>{{ obj }}</h1>
    <h1>{{ readObj }}</h1>
    <button @click="changeValue">changeValue</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from 'vue'

export default defineComponent({
  setup() {
    const obj = reactive({
      a: 1,
      b: {
        c: 2
      }
    })
    //readonly 将对象设置为只读，不能修改。
    const readObj = readonly(obj);
    //shallowReadonly 
    const shaReadObj = shallowReadonly(obj)
    //设置函数 改变obj的value值
    const changeValue = () => {
      //1、刚开始 obj 可以修改
      // obj.a += 1;
      // obj.b.c += 2;
      //2、设置 readonly之后 ，修改则报错，浅层和深层 都不能修改
      // readObj.a += 1;  浅层
      // readObj.b.c += 2; 深层
      //3、设置shallowReadonly之后，浅层(第一层) 只读，不能修改，修改就报错，深层(第二层及以后的层次) 可以修改，修改不会报错
      // shaReadObj.a += 1;  报错   证明 浅层修改报错
      shaReadObj.b.c += 2; //不报错   证明第二层以后的深层次 修改不会报错。
    }
    return {
      obj,
      readObj,
      changeValue
    }
  }
})
</script>

<style scoped>

</style>